<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>首页</title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="fonts/font_icon/iconfont.css" />
		<style type="text/css">
			.bg-circular {
				margin: 10px auto;
				color: #FFFffF;
				width: 150px;
				height: 150px;
				border-radius: 50%;
				line-height: 150px;
				display: block;
				overflow: hidden;
			}
			
			.tab-li {
				width: 100%;
				height: 95px;
				float: left;
				display: block;
				overflow: hidden;
			}
			
			.tab-list {
				width: 50%;
				display: block;
				overflow: hidden;
			}
			
			.tab-list div:first-child {
				font-size: 24px;
				padding-bottom: 10px;
				width: 100%;
				display: block;
				overflow: hidden;
			}
			
			.tab-li div:first-child {
				font-size: 24px;
				padding-bottom: 10px;
				width: 100%;
				display: block;
				overflow: hidden;
			}
			
			.tab-li div {
				font-size: 18px;
				width: 100%;
				height: 50%;
				display: block;
				overflow: hidden;
			}
			
			.bg {
				position: fixed;
				width: 100%;
				height: 100%;
				background: rgba(45, 45, 45, 0.6);
				top: 0;
				left: 0;
				z-index: 20;
				display: none;
			}
			
			#planeType {
				position: fixed;
				width: 100%;
				padding: 10px;
				background: #FFFFFF;
				top: 45px;
				left: 0;
				z-index: 21;
				display: none;
			}
			
			#planeType .typeLi {
				text-align: center;
				padding: 10px;
			}
			
			.header-bg {
				z-index: 22;
			}
			
			.mui-content .mui-icon img {}
			
			.kaoshijieshao {
				background: #e8fbdf;
				display: block;
				border-top-left-radius: 4px;
				border-bottom-left-radius: 4px;
				padding: 5px 0;
				position: relative;
				color: #00c303;
			}
			
			.kaoshijieshao:after {
				position: absolute;
				width: 0;
				height: 0;
				border-left: 10px solid transparent;
				border-right: 10px solid transparent;
				border-top: 31px solid #e8fbdf;
				content: '';
				right: -10px;
				top: 0;
			}
			
			.timushuliang {
				background: #daf8fa;
				display: block;
				position: relative;
				padding: 5px 0;
				color: #06cdb9;
			}
			
			.timushuliang:after {
				position: absolute;
				width: 0;
				height: 0;
				border-left: 10px solid transparent;
				border-right: 10px solid transparent;
				border-top: 31px solid #daf8fa;
				content: '';
				right: -10px;
				top: 0;
			}
			
			.timushuliang:before {
				position: absolute;
				width: 0;
				height: 0;
				border-left: 10px solid transparent;
				border-right: 10px solid transparent;
				border-bottom: 31px solid #daf8fa;
				content: '';
				left: -10px;
				top: 0;
			}
			
			.kaodianjieshao {
				background: #ffeeea;
				display: block;
				border-top-right-radius: 4px;
				border-bottom-right-radius: 4px;
				position: relative;
				padding: 5px 0;
				color: #f15a16;
			}
			
			.kaodianjieshao:after {
				position: absolute;
				width: 0;
				height: 0;
				border-left: 10px solid transparent;
				border-right: 10px solid transparent;
				border-bottom: 31px solid #ffeeea;
				content: '';
				left: -10px;
				top: 0;
			}
			
			#index,
			#mylist {
				display: table-cell;
				overflow: hidden;
				width: 1%;
				height: 50px;
				text-align: center;
				vertical-align: middle;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			
			#index .mui-icon,
			#mylist .mui-icon {
				top: 3px;
				width: 24px;
				height: 24px;
				padding-top: 0;
				padding-bottom: 0;
			}
			
			#index .mui-icon~.mui-tab-label,
			#mylist .mui-icon~.mui-tab-label {
				font-size: 11px;
				display: block;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		</style>
	</head>

	<body>
		<!-- 主页面标题 -->
		<header class="mui-bar mui-bar-nav header-bg">
			<!--<a class="mui-icon mui-icon-bars mui-icon-left-nav mui-pull-left" id="leftwarp"></a>-->
			<h1 class="mui-title" id="headerBtn"><span id="headerText">飞机•私照 </span><span class="mui-icon mui-icon-arrowdown"></span></h1>
			<!--<a class="mui-icon iconfont icon-settings mui-icon-right-nav mui-pull-right" id="setup"></a>-->

		</header>
		<!-- 主页面容器 -->

		<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">

			</div>
		</div>
		<nav class="mui-bar mui-bar-tab">
			<div class="mui-row">
				<a href="javascript:void(0);" class=" mui-text-center" id="index">
					<span class="mui-icon iconfont icon-home" style="padding: 0;"></span>
					<span class="mui-tab-label">首页</span>
				</a>
				<a href="javascript:void(0);" class=" mui-text-center f_c_gay" id="mylist">
					<span class="mui-icon iconfont icon-my" style="padding: 0;"></span>
					<span class="mui-tab-label">我的</span>
				</a>
			</div>
		</nav>
	</body>
	<script type="text/javascript">
		mui.init({
			gestureConfig: {
				doubletap: true
			},
			subpages: [{ //子页面
				url: 'scrollnew.html', // 下拉刷新内容页
				id: 'scrollnew.html', // 内容页标志，随意定义
				styles: {
					top: '45px', // 内容页顶部位置,顶部默认为48px;
					bottom: '50px'
				}
			}],
		});

		mui.plusReady(function() {
			mui('.mui-bar-tab').on('tap', '#mylist', function() {
				mui.openWindow({
					url: 'my.html',
					id: 'mylist'
				});
			})
			mui('.mui-content').on('tap', '.bg', function(e) {
				document.querySelector('.bg').style.display = 'none';
				document.getElementById("planeType").style.display = 'none';
			})

			document.getElementById("headerBtn").addEventListener('tap', function() {
				console.log('dianji!');
				mui.openWindow({
					url: 'top.html',
					styles: {
						top: '45px', // 内容页顶部位置,顶部默认为48px;
						bottom: '0px'
					},
					createNew: false, //是否重复创建同样id的webview，默认为false:不重复创建，直接显示
					show: {
						autoShow: true, //页面loaded事件发生后自动显示，默认为true
						aniShow: "fade-in", //页面显示动画，默认为”slide-in-right“；
						duration: 100, //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
						event: 'titleUpdate', //页面显示时机，默认为titleUpdate事件时显示
					},
					waiting: {
						autoShow: false, //自动显示等待框，默认为true
					}
				});
			})
		})
//		showAG();

		function showAG(ag) {
			console.log(ag);
			document.getElementById("headerText").innerHTML = ag;
		}

		function typelis(e) {
			var headerText = e.innerHTML;
			document.getElementById("headerText").innerHTML = headerText;
			document.querySelector('.bg').style.display = 'none';
			document.getElementById("planeType").style.display = 'none';
		}
		//		document.querySelector('.mui-off-canvas-wrap').addEventListener('shown', function(event) {})
	</script>

</html>